<template>
	<view class="mine-container">
		<view class="mine-header">
      <e-navbar leftTitle="易小语AI占卜" :showBack="false" :bgColor="'rgba(255, 255, 255,' + lucency +')'"></e-navbar>
      <image class="top-bg" :src="$image('/images/index-top-bg.png')" mode="scaleToFill"></image>
    </view>
    <!--  兼容刘海屏和非刘海屏  -->
    <!--  #ifdef MP-WEIXIN  -->
    <view class="user-card card-main" :style="isLiuHaiPing ? 'margin-top: -420rpx;' : 'margin-top: -460rpx;'">
    <!--  #endif    -->
    <!--  #ifndef MP-WEIXIN    -->
    <view class="user-card card-main" style="margin-top: -510rpx;">
    <!--  #endif    -->
      <view class="avatar-row">
				<view  @click="handleToPage('mineDetail')">
					<u-avatar v-if="userinfo.avatar == ''" :src="$image('/images/default-avatar.png')" size="70"></u-avatar>
				  <image v-else :src="$image(userinfo.avatar, 'yes')" style="width: 140rpx; height: 140rpx; border-radius: 50%;" mode="scaleToFill"></image>
        </view>
    
        <view class="detail-tag" @click="handleToPage('mineDetail')">
          <image class="detail-image" :src="$image('/images/detail-tag.png')" mode="aspectFill"></image>
          <text>查看个人资料</text>
          <image class="detail-right" :src="$image('/images/detail-right.png')" mode="aspectFill"></image>
        </view>
      </view>
      <view class="user-name-row">
        <view class="pingfang-heavy font-32">{{userinfo.nickname}}</view>
        <view class="vip-tag" v-if="userinfo.is_vip == 'Y'">
          <image :src="$image('/images/vip-icon1.png')" mode="aspectFill"></image>
          <text>会员</text>
        </view>
      </view>
      <view class="user-address">
        {{userinfo.gender || '未知'}} | {{formatYear || '未知'}} | {{userinfo.current_address || '未知'}}
      </view>
      <view class="open-vip" @click="handleToPage('openVip')">
        <image :src="$image('/images/open-vip.png')" mode="aspectFill"></image>
      </view>
      <view class="user-asset">
        <view class="flex col-center row-between">
          <view class="font-30 pingfang-heavy">我的资产</view>
          <view class="font-24 flex col-center" style="color: #898B94;" @click="handleToPage('moneyDetail')">
            <text class="m-r-6">查看明细</text>
            <u-icon name="arrow-right" size="9" color="#898B94"></u-icon>
          </view>
        </view>
        <view class="asset-content">
          <view class="flex col-center">
            <image class="coin-icon" :src="$image('/images/coin-icon.png')" mode="aspectFill"></image>
            <view>
              <view class="font-24" style="color: #898B94;">易币余额</view>
              <view class="pingfang-heavy">{{Number(userinfo.balance || 0).toFixed(2) || "0.00"}}</view>
            </view>
          </view>
          <view class="rechange-btn" @click="handleShowRecharge()">充值</view>
        </view>
      </view>
    </view>
    <u-gap height="10"></u-gap>
    <view class="card-main">
      <view class="flex col-center row-between m-b-10">
        <view class="font-30 text-bold">常用功能</view>
      </view>
      <view class="menu-list">
        <view class="flex col-center row-between menu-item" v-for="(item,index) in menuList" :key="index" @click="handleMenuItem(item)">
          <view class="menu-item_left flex col-center">
            <image :src="$image('/images/mine-menu' + item.icon + '.png')" mode="aspectFill"></image>
            <view class="m-l-22">{{item.title}}</view>
          </view>
          <u-icon name="arrow-right" size="11" color="#898B94"></u-icon>
        </view>
      </view>
    </view>
    <u-gap hidden="20"></u-gap>

    <e-popup ref="recharge" @close="handleClosePopup" @confirm="handleConfirmPopup">
      <view class="popup-cell" slot="content">
        <view class="cell-item m-b-20">
					<!-- <input type="number" v-model="rechargeValue" placeholder="请输入需要充值的易币数量" placeholder-class="placeholder-class"/> -->
          <u-input v-model="rechargeValue" placeholder="请输入需要充值的易币数量" type="number" border="none"></u-input>
        </view>
        <view class="cell-item flex col-center row-between">
          <text class="font-26">支付金额</text>
          <view>
            <text class="font-26">{{rechargeValue * (setting.recharge_ratio || 1)}}</text>
            <text class="font-26">元</text>
          </view>
        </view>
      </view>
    </e-popup>
    <e-tabbar :current="3"></e-tabbar>
	</view>
</template>

<script>
  let app = getApp();
  import { getCalendarDate } from "@/common/utils"
  import { wxPay } from "@/common/pay";
	export default {
		data() {
			return {
				userinfo:{},
        lucency: 0,
				menuList: [
          {
            icon: 1,
            title: "占卜订单",
            url: "/pages/mine/divinationOrder/divinationOrder",
          },
          {
            icon: 2,
            title: "卡券中心",
            url: "/pages/mine/ticketCenter/ticketCenter",
          },
          // {
          //   icon: 3,
          //   title: "地址管理",
          //   url: "/pages/mine/addressList/addressList",
          // },
          {
            icon: 4,
            title: "消息中心",
            url: "/pages/mine/notice/notice",
          },
          {
            icon: 5,
            title: "设置",
            url: "/pages/mine/setting/setting",
          },
        ],
        rechargeValue: "", //充值数量
        isLiuHaiPing: false, //是否是刘海屏  true:是刘海屏  false:不是刘海屏
        formatYear: "", //格式化的年份
        setting: {}, //设置
			};
		},
    onLoad() {
      console.log('onload')
			// 判断是否是刘海屏
      this.isLiuHaiPing = this.$u.sys().safeArea.top > 20;
    },
		onShow() {
			console.log('onshow')
			this.getUserInfo();
      this.getSetting();
		},
    onPageScroll(e) {
      this.lucency = e.scrollTop / 50;
    },
    methods: {
			async getUserInfo(){
				this.userinfo = await app.getMineInfo();
        let date = await getCalendarDate({
					date:this.$u.timeFormat(this.userinfo.birthday, 'yyyy-mm-dd hh:MM:ss')
				});
        this.formatYear = date.solarYear;
				console.log('ccccc',this.userinfo);
			},
      // 点击充值按钮,显示弹窗
      handleShowRecharge(){
				if(!app.isCompleteInfo()) return false;
        this.$refs.recharge.handleShowPopup("充值易币");
      },
      // 取消按钮回调
      handleClosePopup(){
        this.rechargeValue = "";
        this.$refs.recharge.handleClosePopup();
      },
      // 确认按钮回调
      async handleConfirmPopup(){
        if(this.rechargeValue == "") return this.$u.toast("请输入需要充值的易币数量");
        const res = await this.$api.create_payment({
          total_fee: this.rechargeValue * this.setting.recharge_ratio,
          description: "recharge"
        });
        if(res.code == 1){
          this.handleClosePopup();
          wxPay(res.data, result=>{
            if(result.code == 1){
              this.getUserInfo();
              console.log("查看回调", result);
            }
          })
        }
				// const res = await this.$api.do_recharge({
        //   "pay_way":"1",
        //   "order_amount":this.rechargeValue
        // });
				// if(res.code == 1){
				// 	this.handleClosePopup();
				// 	this.$u.toast("充值成功");
        //   this.getUserInfo();
				// }
      },
      // 共用跳转
      handleToPage(type){
        let url = "";
        switch (type){
          case "mineDetail": // 跳转个人资料
            url = "/pages/mine/mineInfo/mineInfo";
            break;
          case "openVip": // 跳转会员
						if(!app.isCompleteInfo()) return false;
            url = "/pages/mine/vip/vip";
            break;
          case "moneyDetail": // 跳转易币明细
						if(!app.isCompleteInfo()) return false;
            url = "/pages/mine/moneyDetail/moneyDetail";
            break;
        }
        uni.navigateTo({
          url
        });
      },
      handleMenuItem(item){
        uni.navigateTo({
          url: item.url,
        })
      },
      // 获取设置
      async getSetting(){
        const res = await this.$api.setting();
        if(res.code == 1){
          if(res.data.length > 0){
            let obj = res.data.reduce((acc, item) => {
              acc[item.key] = item.value;
              return acc;
            }, {});
            this.setting = obj;
          }
        }
      },
    }
	}
</script>
<style lang="scss" scoped>
.mine-container{
  .mine-header{
    height: 668rpx;
    position: relative;
    .top-bg{
      position: absolute;
      width: 100%;
      height: 100%;
      display: block;
      top: 0;
      left: 0;
    }
  }
  .card-main{
    background: #fff;
    border-radius: 20rpx;
    margin: 0 30rpx;
    position: relative;
    z-index: 5;
    padding: 30rpx;
  }
  .user-card{
    //// #ifndef MP-WEIXIN
    //margin-top: -510rpx;
    //// #endif
    //// #ifdef MP-WEIXIN
    //margin-top: -420rpx;
    //// #endif
    .avatar-row{
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-top: -90rpx;
      .detail-tag{
        width: 270rpx;
        height: 48rpx;
        background: linear-gradient(to left, #ABD2F3, #fff);
        border-radius: 10rpx;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-size: 24rpx;
        padding-right: 20rpx;
        font-family: 'pingfang-heavy';
        .detail-image{
          width: 66rpx;
          height: 66rpx;
          display: block;
          position: absolute;
          bottom: 0;
          left: 0;
        }
        .detail-right{
          width: 20rpx;
          height: 20rpx;
          display: block;
          margin-top: 4rpx;
          margin-left: 10rpx;
        }
      }
    }
    .user-name-row{
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      .vip-tag{
        font-size: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 20rpx;
        background: rgba(170,184,210,0.2);
        border-radius: 30rpx;
        color: #3C4478;
        font-family: 'pingfang-heavy';
        padding: 6rpx 20rpx 6rpx 10rpx;
        image{
          width: 36rpx;
          height: 36rpx;
          display: block;
          margin-right: 10rpx;
        }
      }
    }
    .user-address{
      font-size: 24rpx;
      color: #9AA7B8;
      margin-top: 10rpx;
    }
    .open-vip{
      height: 120rpx;
      margin-top: 30rpx;
      image{
        height: 100%;
        width: 100%;
        display: block;
        border-radius: 10rpx;
      }
    }
    .user-asset{
      margin-top: 30rpx;
      background: #F7F9FF;
      padding: 30rpx;
      border-radius: 20rpx;
      .asset-content{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 30rpx;
        .coin-icon{
          width: 100rpx;
          height: 100rpx;
          display: block;
          margin-right: 20rpx;
        }
        .rechange-btn{
          background: #2B3D75;
          color: #fff;
          border-radius: 10rpx;
          font-size: 24rpx;
          padding: 14rpx 36rpx;
        }
      }
    }
  }
  .menu-list{
    .menu-item:not(:last-child){
      border-bottom: 1px solid #F0F0F0;
      padding-bottom: 30rpx;
    }
    .menu-item{
      padding-top: 30rpx;
      font-size: 28rpx;
      font-family: 'pingfang-heavy';
      &_left{
        image{
          width: 60rpx;
          height: 60rpx;
          display: block;
        }
      }
    }
  }

}
</style>
